<template>
  <el-container>
    <el-header>
      <span class="h1">
        <img src="@/assets/img/logo2.png" />
      </span>
      <div style="margin-left: 270px;margin-top: -40px;">
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#141414"
          background-color="#bbd7e4" active-text-color="#dc1111">
          <!-- <el-menu-item index="1">旅游管理系统</el-menu-item> -->
          <el-menu-item index="1">首页</el-menu-item>
          <el-menu-item index="2" @click="toScenic()">景点信息</el-menu-item>
          <el-menu-item index="3" @click="toVsFood()">美食信息</el-menu-item>
          <el-menu-item index="4" @click="toVsHotel()">酒店信息</el-menu-item>
          <!-- <el-menu-item index="5">旅游路线信息</el-menu-item>
          <el-menu-item index="6">交流论坛</el-menu-item> -->
          <el-menu-item index="7" v-if="user.roleId === 1" @click="toHoutai()">后台管理</el-menu-item>
          <el-menu-item index="8" @click="toVsPerson()">个人中心</el-menu-item>

          <div>
            <el-submenu index="9" class="submenu">
              <template slot="title">{{ user.name }}
                <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
              </template>
              <el-menu-item index="9-1" @click="toVsPerson()">个人中心</el-menu-item>
              <!-- <el-menu-item index="8-2">我的收藏</el-menu-item> -->
              <el-menu-item index="9-3" @click="quit()">退出登录</el-menu-item>
            </el-submenu>
          </div>
        </el-menu>
      </div>
    </el-header>
    <el-main>






      <div class="lb" style="width:100%">
        <!-- 轮播图 -->
        <el-carousel :interval="4000" type="card" arrow="always">
          <el-carousel-item v-for="item in imgs" :key="item.id">
            <!-- <h3>{{ item }}</h3> -->
            <el-image :src="item.lunbo"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 中间方框 1-->
      <!-- <div class="m1">
        <div class="icon-container">
          <div class="icon-box">
            <div class="circle">
              <i class="el-icon-chat-dot-square"></i>
            </div>
            <p>爱好者交流</p>
          </div>
          <div class="icon-box">
            <div class="circle">
              <i class="el-icon-star-off"></i>
            </div>
            <p>我的收藏</p>
          </div>
          <div class="icon-box">
            <div class="circle">
              <i class="el-icon-present"></i>
            </div>
            <p>相关周边</p>
          </div>
          <div class="icon-box">
            <div class="circle">
              <i class="el-icon-medal"></i>
            </div>
            <p>热门推荐</p>
          </div>
          <div class="icon-box">
            <div class="circle">
              <i class="el-icon-film"></i>
            </div>
            <p>了解更多</p>
          </div>
         
        </div>
      </div> -->

      <!-- 中间方框2 -->
      <div class="foodMain" v-for="scenic in scenics.slice(0, fk)" :key="scenic.id" :label="scenic.cover"
        :value="scenic.id">
        <div class="f1">
          <img :src="scenic.cover" class="images">
        </div>
        <div class="f2">
          <span class="title">{{ scenic.name }}</span>
          <div class="concent">
            故宫，又称紫禁城，位于中国北京市中心，是明、清两代的皇宫，也是中国古代宫廷建筑之精华。
            它始建于明朝永乐四年（1406年），历经14年完工，至清朝末年一直是国家的政治中枢和皇家居所。
            故宫南北长961米，东西宽753米，占地面积约72万平方米，建筑面积约15万平方米，拥有宫殿楼阁九千余间，
            是世界上现存规模最大、保存最为完整的木质结构古建筑群。故宫的设计严格遵循了中国古代的礼制与哲学思想，
            体现了“天人合一”的理念。整个建筑群以中轴线为中心对称分布，三大殿——太和殿、中和殿、保和殿，坐落在中轴线上，
            象征着皇权的至高无上。这些建筑不仅在规模上雄伟壮观，而且在装饰艺术上也达到了极高的水准，如雕梁画栋、琉璃瓦顶等，无不展现了中国古代工匠的卓越技艺。
          </div>
        </div>
      </div>


      <!-- 卡片 -->
      <div class="kp">
        <!-- 第一行：两张图片 -->
        <div class="row row-overlay-text">
          <div class="image-box">
            <img src="@/assets/img/j10.jpg" alt="Image 1">
            <div class="overlay-text">长城</div>
          </div>
          <div class="image-box">
            <img src="@/assets/img/j6.jpg" alt="Image 2">
            <div class="overlay-text">布达拉宫</div>
          </div>
        </div>

        <!-- 第二行：四张图片 -->
        <div class="row">
          <div class="image-box">
            <img src="@/assets/img/j13.jpg" alt="Image 3">
            <p>广东-客家围龙屋</p>
          </div>
          <div class="image-box">
            <img src="@/assets/img/j2.jpg" alt="Image 4">
            <p>秦始皇兵马俑</p>
          </div>
          <div class="image-box">
            <img src="@/assets/img/j10.webp" alt="Image 5">
            <p>苏州园林</p>
          </div>
          <div class="image-box">
            <img src="@/assets/img/j14.jpg" alt="Image 6">
            <p>天安门广场</p>
          </div>
        </div>
      </div>
      <!-- <div class="kp">
        <el-row style="margin-top:10px">
          <el-col style="margin-left:20px;" :span="7" v-for="food in foods.slice(0, limit)" :key="food.id"
            :label="food.cover" :value="food.id">
            <el-card :body-style="{ padding: '0px', }">
              <img :src="food.cover" class="image">
              <div style="padding: 8px;">
                <div class="kp1">
                  <span>{{ food.name }}</span>
                </div>

                <div class="bottom clearfix">
                  <el-button type="text" class="button">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row style="margin-top:10px">
          <el-col style="margin-left:20px;" :span="7" v-for="scenic in scenics.slice(0, limit)" :key="scenic.id"
            :label="scenic.cover" :value="scenic.id">
            <el-card :body-style="{ padding: '0px', }">
              <img :src="scenic.cover" class="image">
              <div style="padding: 8px;">
                <span></span>
                <div class="kp1">
                  <span>{{ scenic.name }}</span>
                </div>
                <div class="bottom clearfix">
                  <el-button type="text" class="button">查看详情</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div> -->
    </el-main>

  </el-container>
</template>

<script>
export default {
  name: "VsHome",
  data() {
    return {
      user: JSON.parse(sessionStorage.getItem('CurUser')),
      activeIndex: '1',
      activeIndex2: '1',
      imgs: [],
      scenics: [],
      foods: [],
      limit: 3,    //只显示前三项
      fk: 1,
    };
  },
  //获取数据
  mounted() {
    this.fetchImgs();
    this.fetchScenic();
    this.fetchFood();
  },
  methods: {
    //获取轮播图片的接口
    fetchImgs() {
      this.$axios.post(this.$httpUrl + '/lunbo/listPage', {
      }).then(res => res.data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.imgs = res.data;
        }
      }).catch(error => {
        console.error("查询景点分类信息异常：", error);
      });
    },
    //获取景点信息
    fetchScenic() {
      this.$axios.post(this.$httpUrl + '/scenic/listPage', {
      }).then(res => res.data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.scenics = res.data;
        }
      }).catch(error => {
        console.error("查询景点分类信息异常：", error);
      });
    },
    //获取美食信息
    fetchFood() {
      this.$axios.post(this.$httpUrl + '/food/listPage', {
      }).then(res => res.data).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.foods = res.data;
        }
      }).catch(error => {
        console.error("查询景点分类信息异常：", error);
      });
    },

    //各路由跳转
    toHoutai() {
      this.$router.replace('Person');
    },
    //前端的个人中心
    toVsPerson() {
      this.$router.replace('VsPerson');
    },
    //退出登录
    quit() {
      this.$router.replace('/');
    },
    //景点信息
    toScenic() {
      this.$router.replace('VsScenic');
    },
    //美食信息
    toVsFood() {
      this.$router.replace('VsFood');
    },
    //酒店信息
    toVsHotel() {
      this.$router.replace('VsHotel');
    },
  },


}
</script>

<style scoped>
.element.style {
  width: 120px;
}

img {
  width: 120px;
  /* margin-left: 30px; */
  /* border: 1px solid black; */

}

.el-header {
  /* background-color: #545c64; */
  color: black;
  background-color: #bbd7e4;
  border-bottom: 1px solid rgb(209, 207, 207);
  border-top: 1px solid rgb(209, 207, 207);
  line-height: 61px;
}

.el-main {

  background-color: #eef5fc;
  /* background: url(@/assets/img/bj3.jpg) no-repeat; */
  color: #333;
  text-align: center;
  /* padding: 0px; */
  padding-top: 0px;

}

.el-menu-demo {
  /* width: 100%; */
  /* background-color: #545c64; */
  background-color: #bbd7e4;
  margin-left: 100px;
  margin-top: -76px;

}

/* 轮播图 */
.lb {
  /* box-shadow: 0px 0px 20px -10px #0a1032; */
  padding-top: 20px;
  background-color: #536d62;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;

  line-height: 400px;
  margin: 0;
  border: 1px solid black;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;

}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

/* 中间方框 1 */
.m1 {
  width: 100%;
  height: 150px;
  background-color: #a3c5af;
}

/* 设置整体页面样式 */
/* body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #f4f4f4;
} */

/* 包含所有图标的容器 */
.icon-container {
  display: flex;
  gap: 20px;
  /* 图标之间的间距 */
}

/* 每个图标的盒子 */
.icon-box {
  text-align: center;
}

/* 圆形背景和图标 */
.circle {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background-color: #5b786c;
  margin-left: 150px;
  margin-top: 20px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  margin-bottom: 10px;
  /* 圆形与文字间的间距 */
}

/* 文字说明 */
.icon-box p {
  margin: 0;
  margin-left: 150px;
  font-size: 14px;
}


/* 中间方框2 */
.foodMain {

  width: 100%;
  height: 220px;
  margin: auto;
  display: flex;
  border: 1px dashed #ccc;
  /* margin-top: 20px; */
  /* margin-bottom: 20px; */
  /* transition: transform 0.3s ease; */
  /* 添加过渡效果 */
}

/* .foodMain:hover {
  transform: scale(1.1);
  /* 鼠标悬停时放大 
} */

.f1 {
  width: 40%;
  height: 220px;
  display: block;
  /* border: 1px solid black; */
}

.f2 {
  width: 60%;
  height: 220px;
  display: block;
  background-color: #709076;
  /* border: 1px solid black; */
}

.images {
  width: 100%;
  height: 220px;
  display: block;
}

.title {
  width: 50px;
  height: 50px;
  font-size: 20px;
  margin-top: 50px;
  /* border: 2px solid rgb(231, 16, 16); */
}

.concent {
  /* width: 500px; */
  height: 180px;
  margin-left: 25px;
  margin-top: 10px;
  text-align: left;
  /* 文字左对齐 */
  text-indent: 2em;
  /* 首句空两格，1em约等于一个汉字的宽度 */

}


/* 卡片 */
.kp {
  width: 100%;
  background-color: #fbfbf2;
  width: 100%;

  /*max-width: 1200px;  根据需要调整最大宽度 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 行之间的间距 */

}

/* 包含所有行的容器 */


/* 每一行 */
.row {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  /* 图片之间的间距 */
}

/* 每个图片盒子 */
.image-box {
  position: relative; /*/相对定位/ */
        top: 0;
        left: 0;
  text-align: center;
  flex: 1;
  /* 让每个图片盒子在行内均匀分布 */
  min-width: 150px;
  /* 确保最小宽度 */
}
.overlay-text{
  position: absolute;
        top: 240px;
        left: 65px;
        color: aliceblue;
        width: 520px;
        height: 50px;
        font-size: 25px;
        background-color: rgba(0, 0, 0, 0.6); /* 半透明背景色 */
        font-weight: 700;
        border: 1px solid black;
}

/* 图片样式 */
.image-box img {
  width: 80%;
  height: auto;
  border-radius: 8px;
}

/* 文字说明 */
.image-box p {
  margin-top: 10px;
  font-size: 14px;
}



/* 鼠标悬停时显示文字 */
/* .image-item:hover .overlay-text {
  opacity: 1;
} */

/* .kp1 {
  margin-left: -220px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  height: 130px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
} */

/* 导航栏下拉框右侧 */
.submenu {
  /* border: 1px solid black; */
  width: 150px;
  margin-left: 800px;
  /* margin-top: -32px; */
  height: 50px;
}</style>